<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>

		<link rel="stylesheet" href="css/bootstrap.3.4.1.css">
		<link rel="stylesheet" href="css/main.css">
	</head>

	<!-- 
	 ## 15.3 左侧栏
	 
	 -->
	<body>


		<div class="navbar navbar-default">

			<div class="container">

				<div class="navbar-header">


					<a href="index.html" class="navbar-brand">
					</a>
				</div>

				<ul class="nav navbar-nav">
					<li><a href="#">栓蛋-头条</a></li>
					<li><a href="#">国内</a></li>
					<li><a href="#">国际</a></li>
					<li><a href="#">社会</a></li>
					<li><a href="#">军事</a></li>
					<li><a href="#">财务</a></li>

				</ul>


				<ul class="nav navbar-nav navbar-right">
					<li><a href="#">登录</a></li>
					<li><a href="#">注册</a></li>

				</ul>



			</div>


		</div>

		<div class="container">

			<div class="row">

				<div class="col-xs-2">

					<div class="list-group side-bar">
						<a href="" class="list-group-item  active"> 全部</a>
						<a href="" class="list-group-item"> 电影</a>
						<a href="" class="list-group-item"> 电视剧 3</a>
						<a href="" class="list-group-item"> 明星 3</a>
						<a href="" class="list-group-item"> 八卦 3</a>
						<a href="" class="list-group-item"> 演员 3</a>
						<a href="" class="list-group-item"> 歌手 3</a>
						<a href="" class="list-group-item"> 热榜 </a>
						<a href="" class="list-group-item"> 推荐 </a>
						<a href="" class="list-group-item"> 抗疫 </a>

					</div>

				</div>
				<div class="col-xs-7">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure necessitatibus
					dolores
					voluptate voluptatibus aut sit laudantium quaerat ipsam eius illum impedit similique sequi nihil
					quod ad
					voluptatem sapiente. Quidem qui.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem
					possimus suscipit quae quod expedita reprehenderit omnis aspernatur laborum numquam voluptatibus
					incidunt quam quibusdam quidem reiciendis nobis maiores ratione error illo.</div>
				<div class="col-xs-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum esse illum
					aliquid
					amet sint tempore harum eveniet illo voluptatum ipsa in similique maxime quam? Quisquam maxime
					cumque
					sapiente sit sed?</div>


			</div>




		</div>


	</body>
</html>
